<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>组件内调用事件</title>
	<link rel="stylesheet" href="./libs/bootstrap.css">	
	<style>
	.container{
		margin-top:20px;
	}
	</style>
</head>
<body>
	<div class="container">
			
	</div>
</body>
<script src="./libs/16.2.0/react.js"></script>
<script src="./libs/16.2.0/react-dom.js"></script>
<script src="./libs/16.2.0/babel.js"></script>
<script type="text/babel">
//props和state的区别：props 的属性值是不可变的，而 state 可以根据与用户交互来改变
class Panel extends React.PureComponent{
	constructor(props){
		//调用父类构造函数
		super(props);
		this.state={
			count:0,
			title:props.title,
			content:props.content,
			footer:props.footer,
			theme:props.theme    //theme通过自定义属性传递
		}
		//重置addCount()方法内部的this指向，也可在jsx调用的时候，使用bind()方法进行绑定
		this.addCount = this.addCount.bind(this);
	}

	static defaultProps={
		title:'标题',
		content:'内容',
		footer:'备注',
		// theme:'panel panel-default'
	}
	
	//自定义切换主题方法
	setTheme(title,theme){
		this.setState({
		    title:title,
			theme:theme
		});
	}

	//
	addCount(){
		this.setState({
			count:this.state.count+1
		});	
	}
	
	render(){
		return <div className={this.state.theme}>
		  <div className="panel-heading">
		    <h3 className="panel-title">{this.state.title}</h3>
		  </div>
		  <div className="panel-body">
		    <p>{this.state.content}</p>
		    <p>当前主题:{this.state.theme}</p>
		    <p>页面浏览次数:{this.state.count}</p>
		  </div>
		  <div className="panel-footer">
		 	{/*事件传参必须借助bind(this,参数1,参数2...)*/}
		  	<button onClick={this.setTheme.bind(this,'default主题','panel panel-default')} className="btn btn-sm btn-default">default主题</button>
		  	<button onClick={this.setTheme.bind(this,'success主题','panel panel-success')} className="btn btn-sm btn-success">success主题</button>
		  	<button onClick={this.setTheme.bind(this,'info主题','panel panel-info')} className="btn btn-sm btn-info">info主题</button>
			<button onClick={this.setTheme.bind(this,'primary主题','panel panel-primary')} className="btn btn-sm btn-primary">primary主题</button>
			<button onClick={this.setTheme.bind(this,'danger主题','panel panel-danger')} className="btn btn-sm btn-danger">danger主题</button>
			<button onClick={this.setTheme.bind(this,'warning主题','panel panel-warning')} className="btn btn-sm btn-warning">warning主题</button>
		  	<button onClick={this.addCount} className="btn btn-sm btn-success">浏览次数+1</button>
		  </div>
		</div>
	}
}	
			
ReactDOM.render(
	<Panel theme="panel panel-default"/>,
	document.querySelector('.container')
);

</script>
</html>